<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="source === 'detail'">
    <el-form-item label="产品价格和库存：">
      <el-radio-group v-model="form.standardsType">
        <el-radio :label="0">默认</el-radio>
        <el-radio :label="1">使用产品规格组</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 0" prop="priceStock">
      <el-table key="0" border :data="[{}]">
        <el-table-column label="成本价（元）">
          <el-input v-model="form.costPrice" v-money placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="零售价（元）">
          <el-input v-model="form.retailPrice" v-money placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="门市价（元）">
          <el-input v-model="form.doorMarketPrice" v-money placeholder="请输入" clearable />
        </el-table-column>
        <el-table-column label="库存">
          <el-input v-model="form.dailyInventory" v-int placeholder="请输入" clearable />
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 1" label="规格组和规格值：">
      <el-select v-model="form.skuUnit" clearable>
        <el-option
          v-for="item in unitListOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" class="add-spec" @click="addSpec">添加规格</el-button>
    </el-form-item>
    <el-form-item v-if="form.standardsType === 1">
      <el-table key="1" border :data="form.shopProductStandardsBaseVOS">
        <el-table-column label="产品规格">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="成本价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.costPrice" v-money placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="零售价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.retailPrice" v-money placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="门市价（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.doorMarketPrice" v-money placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="库存">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dailyInventory" v-int placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteSpec(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!--      <el-form-item label="游玩日期：">-->
    <!--        <el-radio-group v-model="form.idPhoto">-->
    <!--          <el-radio :label="3">无需选择游玩日期</el-radio>-->
    <!--          <el-radio :label="9">需选择游玩日期</el-radio>-->
    <!--        </el-radio-group>-->
    <!--      </el-form-item>-->
    <el-form-item label="下单数量：">
      <el-radio-group v-model="form.orderQuantity">
        <el-radio :label="0">不限</el-radio>
        <el-radio :label="1">限制</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="form.orderQuantity === 1" label="">
      <el-col :span="20">
        每次下单，最少
        <el-input v-model="form.leastQuantity" placeholder="请输入" class="min-select" />
        最多
        <el-input v-model="form.mostQuantity" placeholder="请输入" class="min-select" />
      </el-col>
    </el-form-item>
    <!--      <el-form-item label="是否需要报名：">-->
    <!--        <el-radio-group v-model="form.idPhoto">-->
    <!--          <el-radio :label="0">无需</el-radio>-->
    <!--          <el-radio :label="1">需要</el-radio>-->
    <!--        </el-radio-group>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="报名截止时间：">-->
    <!--        <el-date-picker-->
    <!--          v-model="form.mainBodyType"-->
    <!--          type="datetime"-->
    <!--          placeholder="请选择"-->
    <!--          default-time="23:59:59"-->
    <!--        />-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="是否需要填写报名信息：">-->
    <!--        <el-radio-group v-model="form.idPhoto">-->
    <!--          <el-radio :label="0">无需</el-radio>-->
    <!--          <el-radio :label="1">需要</el-radio>-->
    <!--        </el-radio-group>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-table-->
    <!--          :data="form.personTypeFields"-->
    <!--          border-->
    <!--        >-->
    <!--          <el-table-column label="字段名称" prop="fieldName" />-->
    <!--          <el-table-column label="启用（显示）" prop="status">-->
    <!--            <template slot-scope="scope">-->
    <!--              <el-checkbox v-model="scope.row.status" size="small" :disabled="scope.row.disabled" />-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="必填" prop="required" width="70">-->
    <!--            <template slot-scope="scope">-->
    <!--              <el-checkbox v-model="scope.row.required" size="small" :disabled="scope.row.disabled" />-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--          <el-table-column label="字段属性值" prop="fieldAttr" />-->
    <!--          <el-table-column label="提示文案" prop="fieldPrompt" width="150" />-->
    <!--          <el-table-column label="操作" width="100">-->
    <!--            <template v-if="$index>7" slot-scope="{row, $index}">-->
    <!--              <el-button type="text" size="small" @click="editField(row, $index)">编辑</el-button>-->
    <!--              <el-button type="text" size="small" class="danger-text-button" @click="deleteField(row, $index)">删除</el-button>-->
    <!--            </template>-->
    <!--          </el-table-column>-->
    <!--        </el-table>-->
    <!--        <el-button type="primary" class="add-field" @click="addField">添加字段</el-button>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="游客信息：">-->
    <!--        <el-col :span="20">-->
    <!--          <el-radio-group v-model="form.idPhoto">-->
    <!--            <el-radio :label="0">需提供一位游客或联系人信息</el-radio>-->
    <!--            <el-radio :label="1">需要填写每个游客信息</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-col>-->
    <!--      </el-form-item>-->
    <el-form-item label="退款规则：">
      <el-radio-group v-model="form.returnTicketRule">
        <el-radio :label="0">随时退</el-radio>
        <el-radio :label="1">有条件退</el-radio>
      </el-radio-group>
    </el-form-item>

  </el-form>
<!--  <AddField-->
<!--    v-if="showAddField"-->
<!--    :index="fieldIndex"-->
<!--    :form-detail="fieldDetail"-->
<!--    @close="closeHandle"-->
<!--    @confirm="confirmHandle"-->
<!--  />-->
</template>

<script>
import { UNIT_LIST } from '@/utils/enum'
// import AddField from './AddField.vue'

export default {
  name: 'Step2',
  components: {
    // AddField
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const validatePriceStock = (rule, value, callback) => {
      const { costPrice, retailPrice, doorMarketPrice, dailyInventory } = this.form
      if (costPrice && retailPrice && doorMarketPrice && dailyInventory) {
        callback()
      } else {
        callback(new Error('请输入产品价格和库存'))
      }
    }
    return {
      source: '',
      // showAddField: false,
      // fieldIndex: -1,
      // fieldDetail: {},
      unitListOptions: UNIT_LIST,
      form: {
        standardsType: 0,
        skuUnit: '',
        costPrice: '',
        retailPrice: '',
        doorMarketPrice: '',
        dailyInventory: '',
        orderQuantity: 0,
        leastQuantity: '',
        mostQuantity: '',
        returnTicketRule: 0,
        shopProductStandardsBaseVOS: [
          { name: '', costPrice: '', retailPrice: '', doorMarketPrice: '', dailyInventory: '' }
        ]
        // personTypeFields: [
        //   { fieldName: '姓名', status: false, required: false, fieldAttr: '', fieldPrompt: '请输入姓名' },
        //   { fieldName: '性别', status: false, required: false, fieldAttr: '', fieldPrompt: '请选择性别' },
        //   { fieldName: '证件类型', status: false, required: false, fieldAttr: '', fieldPrompt: '请选择证件类型' },
        //   { fieldName: '证件号码', status: false, required: false, fieldAttr: '', fieldPrompt: '请输入证件号码' },
        //   { fieldName: '手机号', status: false, required: false, fieldAttr: '', fieldPrompt: '请输入正确的手机号' },
        //   { fieldName: '健康状况', status: false, required: false, fieldAttr: '', fieldPrompt: '请如实填写健康状态' },
        //   { fieldName: '出生年月', status: false, required: false, fieldAttr: '', fieldPrompt: '请选择出生年月' },
        //   { fieldName: '药物禁忌', status: false, required: false, fieldAttr: '', fieldPrompt: '请如实填写药物禁忌' }
        // ]
      },
      rules: {
        priceStock: [{ required: true, validator: validatePriceStock, trigger: ['blur', 'change'] }]
      }
    }
  },
  watch: {
    formDetail(value) {
      const { standardsType, skuUnit, costPrice, retailPrice, doorMarketPrice, dailyInventory, orderQuantity, leastQuantity, mostQuantity, returnTicketRule } = value
      let { shopProductStandardsBaseVOS } = value
      if (standardsType === 0) {
        shopProductStandardsBaseVOS = [
          { name: '', costPrice: '', retailPrice: '', doorMarketPrice: '', dailyInventory: '' }
        ]
      }
      this.form = {
        standardsType,
        skuUnit,
        costPrice,
        retailPrice,
        doorMarketPrice,
        dailyInventory,
        orderQuantity,
        leastQuantity,
        mostQuantity,
        returnTicketRule,
        shopProductStandardsBaseVOS
      }
    }
  },

  created() {
    const { source } = this.$route.query
    this.source = source
  },

  methods: {
    // 新增规格
    addSpec() {
      this.form.shopProductStandardsBaseVOS.push({ name: '', costPrice: '', retailPrice: '', doorMarketPrice: '', dailyInventory: '' })
    },

    // 删除规格
    deleteSpec(index) {
      this.form.shopProductStandardsBaseVOS.splice(index, 1)
    }

    // // 新增字段
    // addField() {
    //   this.fieldIndex = -1
    //   this.fieldDetail = {}
    //   this.showAddField = true
    // },
    //
    // // 编辑字段
    // editField(row, index) {
    //   this.fieldIndex = index
    //   this.fieldDetail = row
    //   this.showAddField = true
    // },
    //
    // // 删除字段
    // deleteField(row, index) {
    //   this.form.personTypeFields.splice(index, 1)
    // },

    // 关闭弹窗
    // closeHandle() {
    //   this.showAddField = false
    // },

    // 确认添加字段
    // confirmHandle(data) {
    //   if (data.index > -1) {
    //     this.$set(this.form.personTypeFields, data.index, data.form)
    //   } else {
    //     this.form.personTypeFields.push(data.form)
    //   }
    //   this.closeHandle()
    // }

  }
}
</script>
<style lang="scss" scoped>
.add-spec{
  margin-left: 20px;
}
.min-select{
  width: 110px;
  padding: 0 10px;
}
//.add-field{
//  margin-top: 10px;
//}
</style>
